<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8" />

  <title>Demo Chat</title>

  <link href="bootstrap.css" rel="stylesheet">

  <style>
    body {
      padding: 20px;
    }

    #console {
      height: 400px;
      overflow: auto;
    }

    .username-msg {
      color: orange;
    }

    .connect-msg {
      color: green;
    }

    .disconnect-msg {
      color: red;
    }

    .send-msg {
      color: #888
    }
  </style>


  <!-- <script src="js/socket.io/socket.io.js"></script> -->
  <script src="js/socket.io/socket.io.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <!-- <script src="js/jquery-1.7.2.min.js"></script> -->

  <script>

    var userName = 'user' + Math.floor((Math.random() * 1000) + 1);
    var token = "123x"
    // var socket = io.connect('http://localhost:9092', {
    //   query: 'token=' + token
    // });
    const socket = io("http://localhost:9092", {
      query: {
        token: token,
        action:'connect'
      },
      transports: ["websocket","polling"] // use WebSocket first, if available
    });
    // const socket = io("http://localhost:9092", {
    //   query: {
    //     token: token
    //   },
    //   transports: [ "polling"] // use WebSocket first, if available
    // });

    socket.on("connect_error", () => {
      socket.io.opts.query = {
        token: token,
        action:'reconnect'
      }
      // revert to classic upgrade
      socket.io.opts.transports = ["polling", "websocket"]
    });


    socket.on('connect', function () {
      console.log('connected');
      output('<span class="connect-msg">Client has connected to the server!</span>');
      sendMessage1("token!")
    });

    socket.on('message', function (data, ackServerCallback) {
      output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
      if (ackServerCallback) {
        // send ack data to server
        ackServerCallback('server message was delivered to client!');
      }
    });

    socket.on('disconnect', function () {
      output('<span class="disconnect-msg">The client has disconnected!</span>');
    });

    socket.on('ackevent2', function (data, ackServerCallback, arg1) {
      output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
      if (ackServerCallback) {
        ackServerCallback('server message was delivered to client!');
      }
    });

    socket.on('ackevent3', function (data, ackServerCallback) {
      output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
      if (ackServerCallback) {
        ackServerCallback();
      }
    });

    function sendDisconnect() {
      socket.disconnect();
    }

    function sendMessage1(message) {
      var jsonObject = {
        '@class': 'com.corundumstudio.socketio.demo.ChatObject',
        userName: userName,
        message: message
      };

      socket.emit('ackevent1', jsonObject, function (arg1, arg2) {
        alert("ack from server! arg1: " + arg1 + ", arg2: " + arg2);
      });
    }

    function sendMessage() {
      var message = $('#msg').val();
      $('#msg').val('');

      var jsonObject = {
        '@class': 'com.corundumstudio.socketio.demo.ChatObject',
        userName: userName,
        message: message
      };

      socket.emit('ackevent1', jsonObject, function (arg1, arg2) {
        alert("ack from server! arg1: " + arg1 + ", arg2: " + arg2);
      });
    }

    function output(message) {
      var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
      var element = $("<div>" + currentTime + " " + message + "</div>");
      $('#console').prepend(element);
    }

    $(document).keydown(function (e) {
      if (e.keyCode == 13) {
        $('#send').click();
      }
    });

  </script>
</head>

<body>

  <h1>Netty-socketio Demo Chat</h1>

  <br />

  <div id="console" class="well">
  </div>

  <form class="well form-inline" onsubmit="return false;">
    <input id="msg" class="input-xlarge" type="text" placeholder="Type something..." />
    <button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
    <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
  </form>



</body>

</html>